<template>
    <div>
        <a-tree
            :tree-data="fieldList"
            :field-names="{ key: 'filedId', title: 'label' }"
            :selected-keys="[]"
            @select="handleSelectField"
        />
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue'

    export default defineComponent({
        props: {
            fieldList: {
                type: Array,
                default: () => []
            }
        },
        emits: ['selectField'],
        setup(props, { emit }) {
            // 点击字段后，抛出选中字段的事件
            function handleSelectField(selectedKeys, event) {
                const [selectedNode] = event.selectedNodes
                emit('selectField', selectedNode)
            }

            return {
                handleSelectField
            }
        }
    })
</script>

<style lang="less" scoped>
    :deep(.ant-tree-switcher) {
        // 当前的树选择只有一层，所以将展开按钮部分隐藏，以优化样式；如果树结构有了层级，需要将其去掉
        width: 0;
    }
</style>
